<template>
    <div class="container">

        <div class="body_wrap">
            <el-card class="body_card" shadow="hover" ref="content_card">
                <div class="header_back_wrap">
                    <el-page-header @back="$router.back(-1)" :content="$route.meta.title" class="headerBack"></el-page-header>
                    <el-divider></el-divider>
                </div>

                <div class="form_content">
                    <div class="table_form_wrap">
                        <el-form ref="form" :model="form" :rules="rules" @keyup.enter.native="handleSubmit()" label-width="120px">

                            <el-form-item label="收件人" prop="to">
                                <el-input placeholder="多个邮件地址用','分割" v-model="form.to" clearable style="width: 90%"></el-input>
                            </el-form-item>
                            <el-form-item label="抄送人" prop="cc">
                                <el-input placeholder="多个邮件地址用','分割" v-model="form.cc" clearable style="width: 90%"></el-input>
                            </el-form-item>
                            <el-form-item label="暗送人" prop="bcc">
                                <el-input placeholder="多个邮件地址用','分割" v-model="form.bcc" clearable style="width: 90%"></el-input>
                            </el-form-item>
                            <el-form-item label="邮件标题" prop="subject">
                                <el-input placeholder="" v-model="form.subject" clearable style="width: 90%"></el-input>
                            </el-form-item>
                            <el-form-item label="邮件正文" prop="content">
                                <Wangeditor ref="editorRefs" :htmlVal.sync="form.content" :visible="true" height="300" style="width: 91%" />
                            </el-form-item>

                        </el-form>
                    </div>
                </div>

                <div class="foot_submit">
                    <el-button @click="$router.back(-1)">返 回</el-button>
                    <el-button @click="handleSubmit" type="primary" :submitLoading="submitLoading">提 交</el-button>
                </div>

            </el-card>
        </div>



    </div>
</template>

<script>
import Config from '@/config'
import { getUUID } from "@/libs";
import Wangeditor from '@/views/components/wangeditor'
export default {
    components: {
        Wangeditor
    },
    data() {
        return {
            submitLoading: false,
            editor: null,
            loading: false,
            progress: 0,
            form: {
                subject: '测试邮件',
                to: 'yhaoquan@163.com',
                cc: null,
                bcc: null,
                content: ''
            },
            rules: {
                subject: [
                    { required: true, message: '邮件标题不能为空', trigger: 'blur' }
                ],
                to: [
                    { required: true, message: '收件人不能为空', trigger: 'blur' }
                ],
                content: [
                    { required: true, message: '邮件正文不能为空', trigger: 'blur' }
                ]

            }
        }
    },

    created() {
        this.form.id = this.$route.query.id
    },

    mounted() {
        this.$nextTick(function() {
        });
    },

    methods: {

        /**
         * 提交表单
         */
        async handleSubmit() {
            const refs = this.$refs
            this.submitLoading = true
            const valid = await refs['form'].validate().catch(() => {})
            if(valid) {
                const res = await this.$http({
                    url: `/system/tools/mail`,
                    method: 'POST',
                    data: this.form
                })
                if (this.ResultMessage(res)) {
                    this.submitLoading = false
                } else {
                    this.submitLoading = false
                }
            } else {
                this.submitLoading = false
            }
        }
    },
    beforeDestroy() {

    }
}
</script>
<style src="@wangeditor/editor/dist/css/style.css"></style>
<style lang="scss" scoped>



</style>
